```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git代码变更管理艺术 - 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .serif {
            font-family: 'Noto Serif SC', serif;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight-box {
            position: relative;
        }
        .highlight-box::before {
            content: '';
            position: absolute;
            left: -4px;
            top: 0;
            height: 100%;
            width: 4px;
            background: linear-gradient(to bottom, #6e8efb, #a777e3);
            border-radius: 4px;
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 3.5em;
            line-height: 0.8;
            margin: 0.1em 0.1em 0 0;
            color: #6e8efb;
            font-weight: bold;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -32px;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #a777e3;
            border: 3px solid white;
            box-shadow: 0 0 0 2px #a777e3;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 md:py-32 px-4 md:px-0">
        <div class="container mx-auto max-w-4xl text-center">
            <div class="inline-block mb-4 px-4 py-2 bg-white bg-opacity-20 rounded-full backdrop-blur-sm">
                <span class="text-sm font-semibold tracking-wider">版本控制最佳实践</span>
            </div>
            <h1 class="serif text-4xl md:text-6xl font-bold mb-6 leading-tight">Git代码变更管理艺术</h1>
            <p class="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto leading-relaxed">
                高效管理代码变更，打造清晰、稳定、可维护的代码库
            </p>
            <div class="mt-10 flex justify-center space-x-4">
                <a href="#core-principles" class="px-6 py-3 bg-white text-purple-700 rounded-lg font-medium hover:bg-opacity-90 transition-all shadow-lg hover:shadow-xl">
                    <i class="fas fa-book-open mr-2"></i>核心原则
                </a>
                <a href="#strategies" class="px-6 py-3 bg-transparent border-2 border-white text-white rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition-all">
                    <i class="fas fa-code-branch mr-2"></i>分支策略
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto max-w-5xl px-4 md:px-6 py-16">
        <!-- Introduction -->
        <section class="mb-20">
            <div class="highlight-box bg-white p-6 md:p-8 rounded-lg shadow-md">
                <p class="drop-cap text-lg md:text-xl text-gray-700">
                    在软件开发中，高效管理代码变更是保障团队协作顺畅、代码质量稳定的重要一环。Git 作为现代开发中最流行的版本控制工具，提供了强大的分支管理、合并策略、提交历史优化等功能。
                </p>
            </div>
        </section>

        <!-- Core Principles -->
        <section id="core-principles" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
                    <i class="fas fa-lightbulb text-purple-600 text-xl"></i>
                </div>
                <h2 class="serif text-3xl font-bold text-gray-800">1. 代码变更管理的核心原则</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6 mb-12">
                <div class="card-hover bg-white p-6 rounded-xl shadow-md border-l-4 border-purple-500">
                    <div class="flex items-start mb-4">
                        <div class="bg-purple-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-history text-purple-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-800">保持提交记录清晰</h3>
                    </div>
                    <p class="text-gray-600">确保每个提交都有明确的意义，避免杂乱无章的历史记录。使用原子性提交和规范的提交信息格式。</p>
                </div>
                
                <div class="card-hover bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500">
                    <div class="flex items-start mb-4">
                        <div class="bg-blue-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-code-branch text-blue-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-800">合理使用分支</h3>
                    </div>
                    <p class="text-gray-600">不同类型的开发任务应使用不同的分支策略，例如 feature、hotfix、release 等。</p>
                </div>
                
                <div class="card-hover bg-white p-6 rounded-xl shadow-md border-l-4 border-green-500">
                    <div class="flex items-start mb-4">
                        <div class="bg-green-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-random text-green-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-800">避免无意义合并冲突</h3>
                    </div>
                    <p class="text-gray-600">合理使用 Rebase，减少无效的合并提交，保持提交历史的整洁性。</p>
                </div>
                
                <div class="card-hover bg-white p-6 rounded-xl shadow-md border-l-4 border-yellow-500">
                    <div class="flex items-start mb-4">
                        <div class="bg-yellow-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-robot text-yellow-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-800">自动化流程</h3>
                    </div>
                    <p class="text-gray-600">利用 Git Hooks 和 CI/CD 工具自动检测代码质量，确保每次提交都符合团队标准。</p>
                </div>
            </div>
        </section>

        <!-- Branch Strategies -->
        <section id="strategies" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
                    <i class="fas fa-project-diagram text-blue-600 text-xl"></i>
                </div>
                <h2 class="serif text-3xl font-bold text-gray-800">2. 高效的 Git 分支管理策略</h2>
            </div>
            
            <p class="text-lg text-gray-600 mb-10">分支管理是 Git 代码变更管理的核心，选择合适的分支策略能够显著提升团队协作效率。</p>
            
            <!-- Git Flow -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-10">
                <div class="bg-gradient-to-r from-purple-600 to-blue-500 p-6">
                    <h3 class="text-2xl font-bold text-white">2.1 Git Flow</h3>
                    <p class="text-purple-100">适用于大中型团队开发</p>
                </div>
                <div class="p-6">
                    <p class="text-gray-700 mb-6">Git Flow 是一种经典的分支管理模型，主要分支包括：</p>
                    
                    <div class="grid md:grid-cols-2 gap-4 mb-6">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="flex items-center mb-2">
                                <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center mr-3">
                                    <i class="fas fa-code text-white text-sm"></i>
                                </div>
                                <h4 class="font-semibold text-gray-800">main/master</h4>
                            </div>
                            <p class="text-gray-600 text-sm">存放稳定的生产代码</p>
                        </div>
                        
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="flex items-center mb-2">
                                <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-3">
                                    <i class="fas fa-laptop-code text-white text-sm"></i>
                                </div>
                                <h4 class="font-semibold text-gray-800">develop</h4>
                            </div>
                            <p class="text-gray-600 text-sm">主开发分支，所有新功能从此派生</p>
                        </div>
                        
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="flex items-center mb-2">
                                <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center mr-3">
                                    <i class="fas fa-puzzle-piece text-white text-sm"></i>
                                </div>
                                <h4 class="font-semibold text-gray-800">feature/*</h4>
                            </div>
                            <p class="text-gray-600 text-sm">用于开发新功能，完成后合并回 develop</p>
                        </div>
                        
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="flex items-center mb-2">
                                <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center mr-3">
                                    <i class="fas fa-tag text-white text-sm"></i>
                                </div>
                                <h4 class="font-semibold text-gray-800">release/*</h4>
                            </div>
                            <p class="text-gray-600 text-sm">用于发布新版本，确保代码稳定</p>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-4 mb-6">
                        <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">
                            <i class="fas fa-check-circle mr-1"></i> 适合多人协作项目
                        </div>
                        <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">
                            <i class="fas fa-check-circle mr-1"></i> 保证代码稳定性
                        </div>
                        <div class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium">
                            <i class="fas fa-exclamation-circle mr-1"></i> 分支较多，管理成本高
                        </div>
                    </div>
                    
                    <!-- Mermaid Diagram -->
                    <div class="mermaid mb-4">
                        gitGraph
                            commit
                            branch develop
                            checkout develop
                            commit
                            branch feature-1
                            commit
                            commit
                            checkout develop
                            merge feature-1
                            branch release-1.0
                            commit
                            checkout main
                            merge release-1.0
                            checkout develop
                            branch feature-2
                            commit
                            checkout main
                            branch hotfix-1.1
                            commit
                            checkout main
                            merge hotfix-1.1
                            checkout develop
                            merge hotfix-1.1
                    </div>
                </div>
            </div>
            
            <!-- GitHub Flow -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-10">
                <div class="bg-gradient-to-r from-blue-600 to-cyan-500 p-6">
                    <h3 class="text-2xl font-bold text-white">2.2 GitHub Flow</h3>
                    <p class="text-blue-100">适用于小型团队或敏捷开发</p>
                </div>
                <div class="p-6">
                    <p class="text-gray-700 mb-6">GitHub Flow 简化了 Git Flow 的复杂度，仅使用 main 和 feature 分支：</p>
                    
                    <div class="relative pl-10 mb-8">
                        <div class="absolute left-0 top-0 h-full w-1 bg-gradient-to-b from-blue-200 to-blue-500 rounded-full"></div>
                        
                        <div class="timeline-item relative pb-6">
                            <h4 class="font-semibold text-gray-800 mb-2">1. 从 main 拉取 feature 分支</h4>
                            <p class="text-gray-600">每个新功能或修复都从 main 分支创建独立的分支</p>
                        </div>
                        
                        <div class="timeline-item relative pb-6">
                            <h4 class="font-semibold text-gray-800 mb-2">2. 开发完成后提交 PR</h4>
                            <p class="text-gray-600">发起 Pull Request 进行代码审查和自动化测试</p>
                        </div>
                        
                        <div class="timeline-item relative">
                            <h4 class="font-semibold text-gray-800 mb-2">3. 审核通过后合并至 main</h4>
                            <p class="text-gray-600">代码审核通过后立即合并并部署到生产环境</p>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-4 mb-6">
                        <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                            <i class="fas fa-check-circle mr-1"></i> 流程简单直观
                        </div>
                        <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                            <i class="fas fa-check-circle mr-1"></i> 适合快速迭代
                        </div>
                        <div class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium">
                            <i class="fas fa-exclamation-circle mr-1"></i> 不适合严格版本管理
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Trunk-Based Development -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-green-600 to-emerald-500 p-6">
                    <h3 class="text-2xl font-bold text-white">2.3 Trunk-Based Development</h3>
                    <p class="text-green-100">适用于高频发布的项目</p>
                </div>
                <div class="p-6">
                    <p class="text-gray-700 mb-6">开发者直接在 main 分支上开发，依赖特性标志(Feature Flag)控制新功能的启用：</p>
                    
                    <div class="flex items-center mb-6">
                        <div class="bg-green-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-code text-green-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800">核心特点</h4>
                            <p class="text-gray-600">短生命周期分支，快速合并到主干，持续集成部署</p>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-4 mb-6">
                        <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
                            <i class="fas fa-check-circle mr-1"></i> 避免分支管理复杂性
                        </div>
                        <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
                            <i class="fas fa-check-circle mr-1"></i> 实现持续交付
                        </div>
                        <div class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium">
                            <i class="fas fa-exclamation-circle mr-1"></i> 需要完善的测试覆盖
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <div class="flex items-start">
                            <div class="bg-green-500 text-white p-1 rounded-full mr-3 mt-1">
                                <i class="fas fa-info-circle text-xs"></i>
                            </div>
                            <div>
                                <p class="text-gray-700 font-medium mb-1">特性标志(Feature Flag)是什么？</p>
                                <p class="text-gray-600 text-sm">一种允许开发者在不改变代码的情况下启用或禁用功能的机制，常用于A/B测试、渐进式发布等场景。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Commit & Merge Strategies -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                    <i class="fas fa-exchange-alt text-indigo-600 text-xl"></i>
                </div>
                <h2 class="serif text-3xl font-bold text-gray-800">3. 高效的提交与合并策略</h2>
            </div>
            
            <!-- Commit Best Practices -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-10">
                <h3 class="text-2xl font-bold text-gray-800 mb-6">3.1 提交管理最佳实践</h3>
                
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-gray-50 p-5 rounded-lg">
                        <div class="flex items-center mb-3">
                            <div class="bg-indigo-100 p-2 rounded-lg mr-3">
                                <i class="fas fa-atom text-indigo-600"></i>
                            </div>
                            <h4 class="font-semibold text-gray-800">原子性提交</h4>
                        </div>
                        <p class="text-gray-600">每个提交应包含独立且完整的功能变更，避免大而杂的提交。例如：</p>
                        <ul class="list-disc pl-5 mt-2 text-gray-600 space-y-1">
                            <li>修复特定Bug</li>
                            <li>实现单个功能点</li>
                            <li>重构特定模块</li>
                        </ul>
                    </div>
                    
                    <div class="bg-gray-50 p-5 rounded-lg">
                        <div class="flex items-center mb-3">
                            <div class="bg-indigo-100 p-2 rounded-lg mr-3">
                                <i class="fas fa-comment-alt text-indigo-600"></i>
                            </div>
                            <h4 class="font-semibold text-gray-800">有意义的提交信息</h4>
                        </div>
                        <p class="text-gray-600 mb-2">遵循<code class="bg-indigo-100 text-indigo-700 px-1 rounded">类型: 描述</code>格式：</p>
                        <div class="bg-gray-800 rounded p-3 text-sm font-mono text-gray-100 overflow-x-auto">
                            <div class="text-green-400">feat: 增加用户登录功能</div>
                            <div class="text-red-400">fix: 修复支付接口的NullPointerException</div>
                            <div class="text-yellow-400">docs: 更新README使用说明</div>
                            <div class="text-blue-400">refactor: 重构订单模块代码结构</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Rebase vs Merge -->
            <div class="bg-white rounded-xl shadow-md p-6">
                <h3 class="text-2xl font-bold text-gray-800 mb-6">3.2 Rebase vs Merge</h3>
                
                <div class="grid md:grid-cols-2 gap-8 mb-8">
                    <div>
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-100 p-2 rounded-lg mr-3">
                                <i class="fas fa-code-merge text-purple-600"></i>
                            </div>
                            <h4 class="font-semibold text-gray-800">Merge</h4>
                        </div>
                        
                        <div class="bg-gray-800 rounded p-3 mb-4 text-sm font-mono text-gray-100 overflow-x-auto">
                            <span class="text-gray-400"># 在 feature 分支上开发</span><br>
                            <span class="text-blue-400">$</span> git checkout feature-branch<br>
                            <span class="text-blue-400">$</span> git commit -m "feat: 增加支付功能"<br><br>
                            
                            <span class="text-gray-400"># 合并到 main</span><br>
                            <span class="text-blue-400">$</span> git checkout main<br>
                            <span class="text-blue-400">$</span> git merge feature-branch
                        </div>
                        
                        <div class="flex items-start text-gray-700">
                            <div class="bg-green-100 text-green-800 p-1 rounded-full mr-2 mt-1">
                                <i class="fas fa-check text-xs"></i>
                            </div>
                            <div>保留完整的提交历史</div>
                        </div>
                        
                        <div class="flex items-start text-gray-700 mt-2">
                            <div class="bg-red-100 text-red-800 p-1 rounded-full mr-2 mt-1">
                                <i class="fas fa-times text-xs"></i>
                            </div>
                            <div>可能产生多余的合并提交(Merge Commit)</div>
                        </div>
                    </div>
                    
                    <div>
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 p-2 rounded-lg mr-3">
                                <i class="fas fa-indent text-blue-600"></i>
                            </div>
                            <h4 class="font-semibold text-gray-800">Rebase</h4>
                        </div>
                        
                        <div class="bg-gray-800 rounded p-3 mb-4 text-sm font-mono text-gray-100 overflow-x-auto">
                            <span class="text-blue-400">$</span> git checkout feature-branch<br>
                            <span class="text-blue-400">$</span> git rebase main
                        </div>
                        
                        <div class="flex items-start text-gray-700">
                            <div class="bg-green-100 text-green-800 p-1 rounded-full mr-2 mt-1">
                                <i class="fas fa-check text-xs"></i>
                            </div>
                            <div>提交历史更清晰，没有多余的Merge Commit</div>
                        </div>
                        
                        <div class="flex items-start text-gray-700 mt-2">
                            <div class="bg-red-100 text-red-800 p-1 rounded-full mr-2 mt-1">
                                <i class="fas fa-times text-xs"></i>
                            </div>
                            <div>可能导致历史记录重写，影响协作开发</div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-lightbulb text-yellow-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h4 class="font-semibold text-gray-800">推荐方案</h4>
                            <div class="mt-2 text-gray-700">
                                <p>• 团队协作时，使用 <code class="bg-yellow-100 text-yellow-700 px-1 rounded">merge</code>，避免破坏提交历史</p>
                                <p>• 个人分支时，使用 <code class="bg-yellow-100 text-yellow-700 px-1 rounded">rebase</code>，保持提交历史清晰</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Automation -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-teal-100 flex items-center justify-center mr-4">
                    <i class="fas fa-robot text-teal-600 text-xl"></i>
                </div>
                <h2 class="serif text-3xl font-bold text-gray-800">4. 代码变更自动化管理</h2>
            </div>
            
            <!-- Git Hooks -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-10">
                <h3 class="text-2xl font-bold text-gray-800 mb-6">4.1 Git Hooks</h3>
                
                <p class="text-gray-700 mb-6">Git Hooks 可以在代码提交前后自动执行一些操作，如代码格式检查、单元测试等。</p>
                
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-semibold text-gray-800 mb-3">配置 pre-commit Hook</h4>
                        <div class="bg-gray-800 rounded p-3 text-sm font-mono text-gray-100 overflow-x-auto">
                            <span class="text-purple-400">#!/bin/sh</span><br><br>
                            
                            <span class="text-gray-400"># 运行代码格式化工具</span><br>
                            <span class="text-blue-400">npm</span> run lint<br><br>
                            
                            <span class="text-blue-400">if</span> [ <span class="text-yellow-400">$?</span> -ne <span class="text-green-400">0</span> ]; <span class="text-blue-400">then</span><br>
                            &nbsp;&nbsp;<span class="text-blue-400">echo</span> <span class="text-orange-400">"代码格式检查未通过，请修复后再提交！"</span><br>
                            &nbsp;&nbsp;<span class="text-blue-400">exit</span> <span class="text-green-400">1</span><br>
                            <span class="text-blue-400">fi</span>
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="font-semibold text-gray-800 mb-3">赋予执行权限</h4>
                        <div class="bg-gray-800 rounded p-3 text-sm font-mono text-gray-100 overflow-x-auto">
                            <span class="text-blue-400">$</span> chmod +x .git/hooks/pre-commit
                        </div>
                        
                        <div class="mt-6">
                            <h4 class="font-semibold text-gray-800 mb-2">常用Hook类型</h4>
                            <ul class="space-y-2">
                                <li class="flex items-start">
                                    <div class="bg-teal-100 text-teal-800 p-1 rounded-full mr-2 mt-1">
                                        <i class="fas fa-check-circle text-xs"></i>
                                    </div>
                                    <span class="text-gray-700">pre-commit: 提交前检查代码格式</span>
                                </li>
                                <li class="flex items-start">
                                    <div class="bg-teal-100 text-teal-800 p-1 rounded-full mr-2 mt-1">
                                        <i class="fas fa-check-circle text-xs"></i>
                                    </div>
                                    <span class="text-gray-700">pre-push: 推送前运行测试用例</span>
                                </li>
                                <li class="flex items-start">
                                    <div class="bg-teal-100 text-teal-800 p-1 rounded-full mr-2 mt-1">
                                        <i class="fas fa-check-circle text-xs"></i>
                                    </div>
                                    <span class="text-gray-700">commit-msg: 验证提交信息格式</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- CI/CD -->
            <div class="bg-white rounded-xl shadow-md p-6">
                <h3 class="text-2xl font-bold text-gray-800 mb-6">4.2 CI/CD 自动化部署</h3>
                
                <p class="text-gray-700 mb-6">可以结合 GitLab CI、GitHub Actions、Jenkins 等工具，在代码合并后自动执行测试和部署。</p>
                
                <div class="bg-gray-800 rounded-lg overflow-hidden mb-6">
                    <div class="bg-gray-700 px-4 py-2 text-sm text-gray-300 font-mono flex items-center">
                        <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                        <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                        <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                        <span>.github/workflows/ci.yml</span>
                    </div>
                    <div class="p-4 text-sm font-mono text-gray-100 overflow-x-auto">
                        <div class="text-purple-400">name</div>: CI Pipeline<br>
                        <div class="text-purple-400">on</div>:<br>
                        &nbsp;&nbsp;<div class="text-purple-400">push</div>:<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<div class="text-purple-400">branches</div>:<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- <div class="text-orange-400">main</div><br><br>
                        
                        <div class="text-purple-400">jobs</div>:<br>
                        &nbsp;&nbsp;<div class="text-purple-400">build</div>:<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<div class="text-purple-400">runs-on</div>: <div class="text-orange-400">ubuntu-latest</div><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<div class="text-purple-400">steps</div>:<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- <div class="text-purple-400">name</div>: <div class="text-orange-400">Checkout Code</div><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="text-purple-400">uses</div>: <div class="text-orange-400">actions/checkout@v2</div><br>
                        <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- <div class="text-purple-400">name</div>: <div class="text-orange-400">Setup Java</div><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="text-purple-400">uses</div>: <div class="text-orange-400">actions/setup-java@v2</div><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="text-purple-400">with</div>:<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="text-purple-400">java-version</div>: <div class="text-orange-400">'17'</div><br>
                        <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- <div class="text-purple-400">name</div>: <div class="text-orange-400">Build Project</div><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="text-purple-400">run</div>: <div class="text-orange-400">mvn clean package</div>
                    </div>
                </div>
                
                <div class="grid md:grid-cols-3 gap-4">
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <div class="flex items-center mb-2">
                            <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" class="w-8 h-8 mr-2">
                            <h4 class="font-semibold text-gray-800">GitHub Actions</h4>
                        </div>
                        <p class="text-gray-600 text-sm">GitHub原生CI/CD解决方案，与仓库深度集成</p>
                    </div>
                    
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <div class="flex items-center mb-2">
                            <img src="https://about.gitlab.com/images/press/logo/png/gitlab-logo-500.png" alt="GitLab" class="w-8 h-8 mr-2">
                            <h4 class="font-semibold text-gray-800">GitLab CI</h4>
                        </div>
                        <p class="text-gray-600 text-sm">GitLab内置的持续集成服务，配置简单</p>
                    </div>
                    
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <div class="flex items-center mb-2">
                            <img src="https://www.jenkins.io/images/logos/jenkins/jenkins.png" alt="Jenkins" class="w-8 h-8 mr-2">
                            <h4 class="font-semibold text-gray-800">Jenkins</h4>
                        </div>
                        <p class="text-gray-600 text-sm">强大的开源自动化服务器，高度可定制</p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Summary -->
        <section class="bg-gradient-to-r from-purple-100 to-blue-50 rounded-xl p-8 mb-20">
            <div class="text-center max-w-3xl mx-auto">
                <h2 class="serif text-3xl font-bold text-gray-800 mb-6">掌握Git代码变更管理</h2>
                <p class="text-lg text-gray-700 mb-8">
                    通过合理使用分支策略、规范提交记录、优化合并方式以及自动化流程，您可以显著提升团队的开发效率和代码质量。选择适合您团队规模和项目特点的工作流，让版本控制成为开发的助力而非负担。
                </p>
                <div class="flex justify-center space-x-4">
                    <a href="#" class="px-6 py-3 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition-all shadow-lg hover:shadow-xl">
                        <i class="fas fa-book mr-2"></i>深入学习Git
                    </a>
                    <a href="#" class="px-6 py-3 bg-white text-purple-600 border border-purple-600 rounded-lg font-medium hover:bg-purple-50 transition-all">
                        <i class="fas fa-download mr-2"></i>下载备忘单
                    </a>
                </div>
            </div>
        </section>
    </div>
    
    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-10">
        <div class="container mx-auto px-4 text-center">
            <div class="mb-4">
                <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                <a href="http://www.yuque.com/jtostring" class="text-gray-400 hover:text-white transition-colors">http://www.yuque.com/jtostring</a>
            </div>
            <div class="text-sm text-gray-500">
                &copy; 2023 技术小馆. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid.js
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            gitGraph: {
                showCommitLabel: false,
                mainBranchName: 'main',
                rotateCommitLabel: false
            }
        });
        
        // Add smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```